<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item"
            >报名管理</el-breadcrumb-item
          >
          <el-breadcrumb-item class="breadcrumb_active_item"
            ><span @click="matchDetail()" style="cursor: pointer">
              {{ enrollData.title }}
            </span></el-breadcrumb-item
          >
          <el-breadcrumb-item class="breadcrumb_active_item"
            ><span @click="enrollList()" style="cursor: pointer">
              报名名单
            </span></el-breadcrumb-item
          >
          <el-breadcrumb-item>新增报名</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="audit_detail_content">
        <el-row style="margin-top: 20px">
          <el-col :span="16">
            <div class="line_title">报名信息</div>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-form
            ref="enrollFrom"
            :model="enrollData"
            :rules="rules"
            label-width="140px"
            :disabled="userType == 1"
          >
            <el-col :span="16">
              <el-col :span="12">
                <el-form-item label="姓名" size="small" prop="name">
                  <el-input v-model="enrollData.name" maxlength="30"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="手机号" size="small" prop="phone">
                  <el-input v-model="enrollData.phone"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="公司" size="small" prop="company">
                  <el-input v-model="enrollData.company"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="工作岗位" size="small" prop="position">
                  <el-input v-model="enrollData.position"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="证件号"
                  size="small"
                  prop="identity_number"
                >
                  <el-input v-model="enrollData.identity_number"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="赛事名称" size="small" prop="title">
                  <el-input
                    v-model="enrollData.title"
                    maxlength="30"
                    disabled
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="部门:" size="small" prop="department_id">
                  <el-select
                    v-model="enrollData.department_id"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="(item, index) in departmentList"
                      :key="index"
                      :label="item.department_name"
                      :value="item.department_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="证件种类:" size="small" prop="pass_id">
                  <el-select v-model="enrollData.pass_id" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in passList"
                      :key="index"
                      :label="item.pass_name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="现居住地" size="small" prop="title">
                  <el-input
                    v-model="enrollData.address"
                    maxlength="30"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="4">
              <!-- <img
                v-if="enrollData.photo != null && enrollData.photo != ''"
                :src="enrollData.photo"
                class="descriptions_photo"
              /> -->
              <el-form-item label="照片" size="small" prop="photo">
                <el-upload
                  class="match_from_uploader"
                  :data="uploadData"
                  :action="actionUrl"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  :headers="headers"
                >
                  <img
                    v-if="enrollData.photo"
                    :src="enrollData.photo"
                    class="avatar"
                  />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="20">
            <div class="line_title">权限区域</div>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px">
          <el-col :span="20">
            <el-checkbox-group v-model="auditFormData.auditAreaList">
              <el-checkbox
                v-for="item in areaList"
                :key="item.id"
                :label="'' + item.id"
                >{{ item.area_name }}</el-checkbox
              >
            </el-checkbox-group>
          </el-col>
        </el-row>

        <el-row style="margin-top: 20px" v-if="eventDateList.length > 0">
          <el-col :span="20">
            <div class="line_title">赛事日期</div>
          </el-col>
        </el-row>

        <el-row
          style="margin-top: 20px"
          class="b1"
          v-if="eventDateList.length > 0"
        >
          <el-col :span="20">
            <el-checkbox-group v-model="auditEventDateList">
              <el-checkbox
                v-for="item in eventDateList"
                :key="item.id"
                :label="'' + item.id"
              >
                <div class="jia">
                  <p class="p1">{{ item.event_date }}</p>
                </div>
              </el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-row>
      </div>
    </el-row>
    <div class="audit_detail_btn_box">
      <el-button
        type="primary"
        size="mini"
        :disabled="userType == 1"
        @click="addBtn()"
        >提交</el-button
      >
      <el-button type="info" size="mini" @click="backBtn()"
        >返回上一页</el-button
      >
    </div>
  </div>
</template>
<style src="../../assets/css/enroll/addEnroll.css" scoped></style>

<script>
export default {
  name: "AddEnroll",
  components: {},
  data() {
    return {
      userType: this.$store.state.loginUserType == "ADMINLOGINUSERCH" ? 0 : 1, // 用户类型;1. 普通; 0. 超级;
      baseAPIUrl: this.$store.state.baseAPIUrl,
      loadingKey: false,
      loadingText: "",
      matchId: "", // 赛事名称id
      activeVal: 0, // 步骤条选中值
      finishStatus: "wait", // 步骤条选中状态
      enrollData: {
        title: "", // 赛事名称名称
        department_id: "", // 部门ID
        department_name: "", // 部门
        pass_id: "", // 证件种类ID
        pass_mark: "", // 证件种类值
        area_ids: "", // 活动权限区域ID
        area_mark: "", // 活动权限区域值

        name: "", // 姓名
        phone: "", // 手机号
        photo: "", // 照片
        local_photo: "", // 照片服务器路径
        company: "", // 公司
        position: "", // 工作岗位
        address: "", //现居住地
        identity_number: "", //证件号
        event_date_ids: "", //赛事日期ID
      }, // 报名数据
      rules: {
        photo: [{ required: true, message: "上传照片", trigger: "change" }],
        phone: [{ validator: this.validatetel, trigger: "change" }],
        identity_number: [{ validator: this.vals, trigger: "change" }],
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        company: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "长度在 2 到 30 个字符",
            trigger: "blur",
          },
        ],
        // position: [
        //   { required: true, message: "请输入工作岗位", trigger: "blur" },
        //   {
        //     min: 2,
        //     max: 10,
        //     message: "长度在 2 到 10 个字符",
        //     trigger: "blur",
        //   },
        // ],
        department_id: [
          { required: true, message: "请选择部门", trigger: "change" },
        ],
        pass_id: [
          { required: true, message: "请选择证件种类", trigger: "change" },
        ],
      },
      auditFormData: {
        auditAreaList: [],
      }, // 审核提交
      areaList: [], // 权限区域列表
      auditEventDateList: [], // 选中的赛事日期列表
      eventDateList: [], // 赛事日期列表
      departmentList: [], // 部门列表
      passList: [], // 证件种类
      actionUrl: this.$store.state.baseAPIUrl + "/upload/uploadFile", // 上传路径
      uploadData: {
        source: 8,
      }, // 上传额外参数
      headers: {
        Authorization: this.$store.state.loginToken,
      }, // 上传用token
    };
  },
  created: function () {
    console.log(this.$store.state.baseAPIUrl);
    let query = this.$route.query;
    if (query.id != undefined && query.id != "") {
      this.matchId = query.id;
    }

    this.getAreaListDataFn();
    this.getEventDateListFn();
    this.getDepartmentListFn();
    this.getPassListFn();
  },
  methods: {
    // 获取权限区域列表数据
    getAreaListDataFn: function () {
      let that = this;
      let url = "/admin/area/index";
      let data = {
        event_id: this.matchId,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.areaList = response.list;
            that.enrollData.title = response.event.title;
            let list = [];
            if (
              that.enrollData.area_ids != "" &&
              that.enrollData.area_ids != null &&
              that.enrollData.area_ids != undefined
            ) {
              list = that.enrollData.area_ids.split(",");
            }
            that.auditFormData.auditAreaList = list;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 获取权限区域列表数据
    getEventDateListFn: function () {
      let that = this;
      let url = "/admin/event/getEventDateList";
      let data = {
        event_id: this.matchId,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.eventDateList = response.list;
            console.log(response);
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 获取部门列表
    getDepartmentListFn: function () {
      let that = this;
      let url = "/admin/eventdepartment/index";
      let data = {
        event_id: this.matchId,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.departmentList = response.list;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 获取证件种类列表
    getPassListFn: function () {
      let that = this;
      let url = "/admin/pass/index";
      let data = {
        event_id: this.matchId,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.passList = response.list;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 返回
    backBtn: function () {
      this.$router.replace({
        name: "EnrollList",
      });
    },

    // 保存修改信息
    addBtn: function () {
      let that = this;
      let url = "/admin/apply/addApply";
      let data = {
        event_id: this.matchId,
        department_id: this.enrollData.department_id,
        name: this.enrollData.name,
        photo: this.enrollData.photo,
        local_photo: this.enrollData.local_photo,
        company: this.enrollData.company,
        position: this.enrollData.position,
        phone: this.enrollData.phone,
        pass_id: this.enrollData.pass_id,
        address: this.enrollData.address,
        identity_number: this.enrollData.identity_number,
        area_ids: this.auditFormData.auditAreaList.join(","),
        event_date_ids: this.auditEventDateList.join(","),
      };

      this.$refs.enrollFrom.validate((valid) => {
        if (!valid) {
          return false;
        } else {
          that
            .$confirm("确认提交?", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
            })
            .then(() => {
              that.loadingText = "处理中...";
              that.loadingKey = true;
              that.axios
                .post(url, data)
                .then((response) => {
                  that.loadingKey = false;
                  if (response.code == 0) {
                    that.$message.success("提交成功");
                    that.backBtn();
                  } else {
                    that.$message.error(response.msg);
                  }
                })
                .catch(function (error) {
                  that.loadingKey = false;
                  console.log(error);
                });
            });
        }
      });
    },
    // 上传成功钩子
    handleAvatarSuccess: function (res, file) {
      this.imageShowUrl = URL.createObjectURL(file.raw);
      this.enrollData.photo = res.image;
      this.enrollData.local_photo = res.loacl_image;
      this.$message.success("上传成功");
    },
    // 上传前钩子
    beforeAvatarUpload: function (file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 3;

      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 3MB!");
        return false;
      }
      return true;
    },
    // 活动详情
    matchDetail: function () {
      const routeUrl = this.$router.resolve({
        name: "MatchFrom",
      });
      window.open(
        routeUrl.href + "?id=" + this.enrollData.event_id + "&key=3",
        "_blank"
      );
    },
    // 报名名单
    enrollList: function (key) {
      this.$router.push({
        name: "EnrollList",
      });
    },
    // 校验手机号输入
    validatetel: function (rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else {
        let telText =
          /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/;
        if (!telText.test(value)) {
          callback(new Error("手机号格式不正确"));
        } else {
          callback();
        }
      }
    },
    vals(rule, value, callback) {
      let telTex = /^[a-z]|[0-9]$/;
      if (!telTex.test(value)) {
        callback(new Error("证件格式不正确"));
      } else {
        callback();
      }
    },
  },
};
</script>
